<template>
  <div class="collect-article">
     <van-icon
        :color="collect?'#ffa500':'#777'"
        :name="collect?'star':'star-o'"
        @click="onCollect"
      />
  </div>
</template>
<script>
import {addCollectAPI,deleteCollectAPI} from '@/api';
export default {
  name:"Collect",
  components:{},
  model:{
    prop:'collect',
    event:'update_collect'
  },
  props:{
    collect:{
      type:Boolean,
      required:true
    },
    articleId:{
      type:[Number,String,Object],
      required:true
    }
  },
  data(){
    return {
    }
  },
  computed:{},
  watch:{},
  methods:{
    async onCollect(){
      try{
        if(this.collect){
          //已收藏  则取消收藏
          await deleteCollectAPI(this.articleId)
        }else{
          //为收藏  则添加收藏
          await addCollectAPI(this.articleId)
        }
        //更新数据
        this.$emit('update_collect',!this.collect)
        this.$toast.success(this.collect?"取消收藏":"收藏成功")
      }catch(err){
        this.$toast.fail("操作失败,请稍后重试!")
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>